import React from "react";

// 1.this问题解决方案1：通过定义一个箭头函数方法解决（推荐写法）
class ThisQa extends React.Component {
  /*
  解决原因分析：因为箭头函数本身没有this，箭头函数内部的this是在定义它的时候往外层查找到最近一层的this
  此处handerClick箭头函数的this代表的是ThisQa这个类对象实例
  */
  handerClick = () => {
    console.log(this);
  };
  render() {
    return (
      <div>
        <button onClick={this.handerClick}></button>
      </div>
    );
  }
}

export default ThisQa;

// 2.this问题解决方案2：在事件绑定的时候直接使用箭头函数解决
// class ThisQa extends React.Component {
//   handerClick() {
//     console.log(this);
//   }
//   render() {
//     return (
//       <div>
//          {  /*
//     解决原因分析：因为箭头函数本身没有this，箭头函数内部的this是在定义它的时候往外层查找到最近一层的this
//     此处绑定的是箭头函数，所以在调用普通方法handerClick的时候就是运行时的对象ThisQa实例
//     */}
//         <button onClick={()=>{this.handerClick();}}></button>
//       </div>
//     );
//   }
// }

// export default ThisQa;

// 3.this问题解决方案3：在事件绑定的时候直接使用bind动态改变this
// class ThisQa extends React.Component {
//   handerClick() {
//     console.log(this);
//   }
//   render() {
//     return (
//       <div>
//     {  /*
//     解决原因分析：bind方法可以给一个函数绑定this对象，语法： Function.bind(改变this的对象实例)
//      */}
//         <button onClick={this.handerClick.bind(this)}></button>
//       </div>
//     );
//   }
// }

// export default ThisQa;

// 4.this问题解决方案4：在构造函数中通过bind方法动态改变this
// class ThisQa extends React.Component {
// constructor() {
//     super(); // 调用父类的构造函数，如果显示编写了构造函数，就必须显示通过super()的调用父类的构造函数,否则报错
// {
//   /*
//        解决原因分析：bind方法可以给一个函数绑定this对象，语法： Function.bind(改变this的对象实例)
//    /      */
// }
//     this.handerClick = this.handerClick.bind(this);
//   }
//   handerClick() {
//     console.log(this);
//   }
//   render() {
//     return (
//       <div>
//         <button onClick={this.handerClick}></button>
//       </div>
//     );
//   }
// }

// export default ThisQa;
